<template>
    <div class="el-materialDistribution">
      <el-container>
        <el-header>
          <InnerHead />
        </el-header>
        <el-container>
          <el-aside :width=asideWidth>
            <div class="md-openClose" @click="listSwitch"></div>
            <OperationMonitoringList :curMenus=menus ref= "MDList" :updateCom=updateCom />
          </el-aside>
          <el-main>
              <!-- <router-view></router-view> -->
               <menuView :menus=menus :setMDListShow=setMDListShow ref="menuView"></menuView>
         
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
<script>
import InnerHead from '../../components/InnerHead.vue'
import OperationMonitoringList from "./components/OperationMonitoringList.vue"
import menuView from "../../components/menuView.vue"
export default {
    name: "OperationMonitoring",
    components:{InnerHead,OperationMonitoringList,menuView
    },
    data(){
    return{
        asideWidth:'200px',
        isSwitch:true,
        menus:[]
    }
    },
    methods:{
        listSwitch(){
            
            let box = document.querySelector('.md-openClose')
            if(this.isSwitch == true){
                box.style.clipPath = 'polygon(0 0,0 100%,100% 50%)'
                this.asideWidth = '0px'
                box.style.left = '0px'
                this.isSwitch = false
            }else if(this.isSwitch == false){
                box.style.clipPath = 'polygon(0 50%,100% 100%,100% 0)'
                this.asideWidth = '200px'
                box.style.left = '190px'
                this.isSwitch = true
            }
        }
        ,
        setMDListShow(menu){

        this.$refs.MDList.setShowMenu(menu);
        },
        updateCom(){
            this.$refs.menuView.updateView();
        }
    }
}
</script>
<style scoped>
.el-header {
    padding: 0;
    background:linear-gradient( to right,rgb(26, 96, 157),rgb(127, 239, 236));
}
.el-aside {
    height: calc(100vh - 60px);
    background:linear-gradient( to left bottom,#1279AF,#2BBFCF);
    padding-top: 16px;
    transition-duration: 0.2s;
}
.el-main {
  height: calc(100vh - 60px);
}
.md-openClose {
  width: 10px;
  height: 20px;
  background: #2BBFCF;
  clip-path: polygon(0 50%,100% 100%,100% 0);
  position: absolute;
  left: 190px;
  top: 60px;
  cursor: pointer;
  z-index: 99;
  transition-duration: 0.2s;
}
</style>